<!--  商家展示区 -->

<template>
    <div class="shop-info">
        <div class="shop-top">
            <img :src="shop.logo">
            <span class="title">{{shop.name}}</span>
        </div>
        <div class="shop-middle">
            <div class="shop-middle-item">
                <div class="info-sells">
                    <div class="info-sells-left">
                        <p>{{shop.sells | sellCountFilter}}</p>
                        <p>总销量</p>
                    </div>
                    <div class="info-sells-right">
                        <p>202</p>
                        <p>全部宝贝</p>
                    </div>
                </div>
                <div class="info-middle"></div>
                <div>
                    <div v-for="(item, index) in shop.score" :key="index" class="descript-item">
                        <p>{{item.name}}</p>
                        <p class="score" :class="{'score-better':item.isBetter}">{{item.score}}</p>
                        <p class="better" :class="{'better-more':item.isBetter}">{{item.isBetter ? '高' : '低'}}</p>
                    </div>
                </div>
            </div>
            <div class="shop-bottom">进店逛逛</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'DetailShopInfo',

        props: {
            shop: {
                type:Object,
                default: ()=>{
                    return {}
                }
            }
        },

        created () {
        },

        filters: {
            sellCountFilter(money) {
                if (money < 10000) return money;
                return (money/10000).toFixed(1) + '万'
            }
        }
    }
</script>

<style scoped>
    .shop-info {
        height: 200px;
        margin-top: 20px;
        /* background-color: black; */
        border-bottom: 5px solid #f2f5f8;
    }

    .shop-info .shop-top {
        height: 40px;
        padding: 0 8px;
    }

    .shop-info .shop-top img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(0,0,0,.1);
    }

    .shop-top .title {
        font-size: 16px;
        /* position: relative;
        top: -10px;
        left: 10px; */
        margin-left: 10px;
        /* 由于有img 基线在img底部 所有使用这方法无法使文字垂直居中*/
        vertical-align: 15px;
        
    }
    
    .shop-middle {
        height: 100px;

        padding-top: 25px;
    }

    .shop-middle .shop-middle-item {
        display: flex;

        padding: 0 35px;
        justify-content: space-between;
    }
    .shop-middle .shop-middle-item .info-sells {
        display: flex;

    }

    .shop-middle .shop-middle-item .info-sells .info-sells-left :first-child,
    .shop-middle .shop-middle-item .info-sells .info-sells-right :first-child
    {
        font-size: 18px;
        text-align: center;
    }

    .shop-middle .shop-middle-item .info-sells .info-sells-left :nth-child(2),
    .shop-middle .shop-middle-item .info-sells .info-sells-right :nth-child(2)
    {
        font-size: 12px;
        text-align: center;
        margin-top: 5px;
    }

    .shop-middle .shop-middle-item .info-sells .info-sells-right {
        margin-left: 35px;
    }

    .shop-middle .shop-middle-item .info-middle {
        border-right: 1px solid rgba(0,0,0,.1);
    }

    .descript-item {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        margin-top: 5px;
    }

    .descript-item:first-child {
        margin-top: 0;
    }

    .descript-item > p:first-child{
        color: #333;
    }

    .descript-item > p {
        margin: 0 5px;
    }

    .descript-item .score {
        color: #5ea732;
    }

    .descript-item .score-better {
        color: #f13e3a;
    }

    .descript-item .better {
        background-color: #5ea732;
        color: #fff;
    }

    .descript-item .better-more {
        background-color: #f13e3a;
    }

    .shop-bottom {
        width: 140px;
        margin: 10px auto;
        padding: 5px 0;
        border-radius: 8px;
        text-align: center;
        background-color: rgb(242,245,248);
    }
</style>